import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Input,
  Row,
  Select,
  Table,
  Divider,
  Badge,
  Tag,
  Popconfirm,
  message,
} from 'antd';
import {
  ArticleCommentModelState,
  IRouteComponentProps,
  Link,
  OwnspaceModelState,
  useDispatch,
  useSelector,
} from 'umi';
import { useState, useEffect } from 'react';
import Footer from '@/components/commonFooter';
import style from './index.less';
import './default.less';
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
const { Option } = Select;
const Article: React.FC<IRouteComponentProps> = (props) => {
  const dispatch = useDispatch();
  //获取 分类数据 表格数据
  const { categoryList } = useSelector(
    (state: { ownspace: OwnspaceModelState }) => state.ownspace,
  );
  const {
    articleCommentList,
    articleCommentListLength,
    articleCommentListRecommend,
    aArticleCommentList,
    articleCommentListDel,
  } = useSelector(
    (state: { article: ArticleCommentModelState }) => state.article,
  );
  //表格数据
  const columns: any = [
    {
      title: '标题',
      width: 200,
      dataIndex: 'title',
      key: 'title',
      fixed: 'left',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'id',
      render: (value: string) => {
        return (
          <span>
            <span>
              {value == 'publish' ? (
                <Badge status="success" text="已发布" />
              ) : (
                <Badge status="warning" text="草稿" />
              )}
            </span>
          </span>
        );
      },
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'id',
      render: (value: any) => {
        return (
          <span>{value ? <Tag color="pink">{value.label}</Tag> : ''}</span>
        );
      },
    },
    {
      title: '标签',
      dataIndex: 'tags',
      key: 'tags',
      render: (value: any) => {
        return (
          <span>
            {value[0] ? <Tag color="green">{value[0].label}</Tag> : ''}
          </span>
        );
      },
    },
    {
      title: '阅读量',
      dataIndex: 'views',
      key: 'views',
      render: (value: string) => {
        return (
          <span>
            <Badge
              className="site-badge-count-109"
              count={value}
              style={{ backgroundColor: '#52c41a' }}
              overflowCount={999999}
            />
          </span>
        );
      },
    },
    {
      title: '喜欢数',
      dataIndex: 'likes',
      key: 'likes',
      render: (value: string) => {
        return (
          <span>
            <Badge
              className="site-badge-count-109"
              count={value}
              style={{ backgroundColor: '#eb2f96' }}
              overflowCount={999999}
              showZero
            />
          </span>
        );
      },
    },
    { title: '发布时间', dataIndex: 'publishAt', id: 'publishAt',width: 180, },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 307,
      render: (value: any) => {
        return (
          <div>
            <Link to={`/article/editor/${value.id}`}><Button type="link">编辑</Button></Link>
            <Divider type="vertical" />
            {value.isRecommended ? (
              <Button
                type="link"
                onClick={() => {
                  dispatch({
                    type: 'article/setArticleCommentListRecommend',
                    payload: { id: value.id, isRecommended: false },
                  });
                }}
              >
                撤销首焦
              </Button>
            ) : (
              <Button
                type="link"
                onClick={() => {
                  dispatch({
                    type: 'article/setArticleCommentListRecommend',
                    payload: { id: value.id, isRecommended: true },
                  });
                }}
              >
                首焦推荐
              </Button>
            )}
            <Divider type="vertical" />
            <Button type="link">查看访问</Button>
            <Divider type="vertical" />
            <Popconfirm
              title="确认删除这个文章?"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                dispatch({
                  type: 'article/delArticleCommentList',
                  payload: { id: value.id },
                });
              }}
            >
              <Button type="link">删除</Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  const [status, setStatus] = useState(undefined);
  const [category, setCategory] = useState(undefined);
  const [title, setTitle] = useState(undefined);
  const [form] = Form.useForm();
  const [flag, setFlag] = useState(false);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [allRelease, setAllRelease] = useState([]);
  //多选删除
  const onReset = () => {
    form.resetFields();
  };
  //搜索
  const onFinish = (value: any) => {
    if (value.title) {
      setTitle(value.title);
    } else {
      setTitle(undefined);
    }
    if (value.status) {
      setStatus(value.status);
    } else {
      setStatus(undefined);
    }
    if (value.category) {
      setCategory(value.category);
    } else {
      setCategory(undefined);
    }
  };
  useEffect(() => {
    dispatch({
      type: 'ownspace/getCategoryList',
    });
  }, []);
  useEffect(() => {
    dispatch({
      type: 'article/getArticleCommentList',
      payload: {
        page,
        pageSize,
        title,
        status,
        category,
      },
    });
  }, [
    page,
    pageSize,
    title,
    status,
    category,
    articleCommentListRecommend,
    aArticleCommentList,
    articleCommentListDel,
  ]);
  //控制全选、反选、单选
  const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      selectedRows.length ? setFlag(true) : setFlag(false);
      setAllRelease(selectedRows);
    },
  };

  return (
    <>
      <div className={style.article_header}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/">工作台</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/article">所有文章</Link>
          </Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="article_main">
        <div>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            className="article_from"
            form={form}
            onFinish={onFinish}
          >
            <Row
              style={{
                marginLeft: '-12px',
                marginRight: '-12px',
                rowGap: '0px',
              }}
            >
              <Col
                span={6}
                style={{ paddingLeft: '12px', paddingRight: '12px' }}
              >
                <Form.Item
                  label="标题"
                  name="title"
                  rules={[
                    {
                      message: 'Please input your username!',
                    },
                  ]}
                >
                  <Input placeholder="请输入文章标题" />
                </Form.Item>
              </Col>
              <Col
                span={6}
                style={{ paddingLeft: '12px', paddingRight: '12px' }}
              >
                <Form.Item label="状态" name="status">
                  <Select style={{ width: 180 }}>
                    <Select.Option value="publish">已发布</Select.Option>
                    <Select.Option value="draft">草稿</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col
                span={6}
                style={{ paddingLeft: '12px', paddingRight: '12px' }}
              >
                <Form.Item label="分类" name="category">
                  <Select style={{ width: 180 }}>
                    {categoryList.length
                      ? categoryList.map((item, index) => (
                          <Option key={index} value={item.id}>
                            {item.label}
                          </Option>
                        ))
                      : ''}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row
              style={{
                marginLeft: '-12px',
                marginRight: '-12px',
                rowGap: '0px',
              }}
              className="article_from_button"
            >
              <div>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
                <Button
                  htmlType="button"
                  onClick={onReset}
                  className="article_from_button_reset"
                >
                  重置
                </Button>
              </div>
            </Row>
          </Form>
          <div style={{ background: '#fff', padding: '24px 12px' }}>
            <div className={style.article_comment_header}>
              <div style={flag ? { opacity: '1' } : { opacity: '0' }}>
                <Button
                  style={{ marginRight: '8px' }}
                  onClick={() => {
                    allRelease.map((item: any) => {
                      dispatch({
                        type: 'article/setArticleCommentList',
                        payload: { id: item.id, status: 'publish' },
                      });
                    });
                  }}
                >
                  发布
                </Button>
                <Button
                  style={{ marginRight: '8px' }}
                  onClick={() => {
                    allRelease.map((item: any) => {
                      dispatch({
                        type: 'article/setArticleCommentList',
                        payload: { id: item.id, status: 'draft' },
                      });
                    });
                  }}
                >
                  草稿
                </Button>
                <Button
                  style={{ marginRight: '8px' }}
                  onClick={() => {
                    allRelease.map((item: any) => {
                      dispatch({
                        type: 'article/setArticleCommentListRecommend',
                        payload: { id: item.id, isRecommended: true },
                      });
                    });
                  }}
                >
                  首焦推荐
                </Button>
                <Button
                  style={{ marginRight: '8px' }}
                  onClick={() => {
                    allRelease.map((item: any) => {
                      dispatch({
                        type: 'article/setArticleCommentListRecommend',
                        payload: { id: item.id, isRecommended: false },
                      });
                    });
                  }}
                >
                  撤销首焦
                </Button>
                <Popconfirm
                  title="确认删除?"
                  okText="确认"
                  cancelText="取消"
                  onConfirm={() => {
                    allRelease.map((item: any) => {
                      dispatch({
                        type: 'article/delArticleCommentList',
                        payload: { id: item.id },
                      });
                    });
                  }}
                >
                  <Button danger>删除</Button>
                </Popconfirm>
              </div>
              <div>
                <Link to="/article/editor" style={{ color: '#fff' }}>
                  <Button type="primary">
                    <PlusOutlined /> 新建
                  </Button>
                </Link>
                <ReloadOutlined
                  style={{ marginLeft: '12px', cursor: 'pointer' }}
                  onClick={() => {
                    dispatch({
                      type: 'article/getArticleCommentList',
                      payload: {
                        page,
                        pageSize,
                        title,
                        status,
                        category,
                      },
                    });
                  }}
                />
              </div>
            </div>
            <Table
              columns={columns}
              dataSource={articleCommentList}
              scroll={{ x: 1300 }}
              rowSelection={{ ...rowSelection }}
              pagination={{
                showSizeChanger: true,
                pageSizeOptions: ['8', '12', '24', '36'],
                pageSize: pageSize,
                onChange: function (page, pageSize) {
                  setPageSize(pageSize);
                  setPage(page);
                },
                showTotal: (total) => `共${total}条`,
                total: articleCommentListLength,
              }}
            />
          </div>
        </div>
        <Footer></Footer>
      </div>
    </>
  );
};
export default Article;
